<template>
  <div>
    <el-row class="activityListTable" style="height:100%">
     
        <el-row class="toCreate">
          <el-col :span="2">
            <el-col :span="12">
              <router-link to="/actAdd" >
                <el-button class="createButton el-icon-plus" v-show="getButtonConfig&&getButtonConfig.create">&nbsp;&nbsp;&nbsp;新增</el-button>
              </router-link>
            </el-col>
          </el-col>
        </el-row>
        <el-table class="tableData" :data="tableData" >
          <el-table-column prop="id"                  label="活动ID"        width="70"></el-table-column>
          <el-table-column prop="typeText"            label="活动类型"      min-width="70"></el-table-column>
          <el-table-column prop="name"                label="活动名称"      min-width="120"></el-table-column>
          <el-table-column prop="dateStart"           label="活动开始时间"  min-width="140"></el-table-column>
          <el-table-column prop="dateEnd"             label="活动结束时间"  min-width="140"></el-table-column>
          <el-table-column prop="statusText"          label="是否开始"      width="90"></el-table-column>
          <el-table-column prop="publishStatusText"   label="发布状态"      width="90"></el-table-column>
          <el-table-column prop="publishOverview"     label="发布终端"      min-width="90"></el-table-column>
          <el-table-column prop="creator"             label="录入者"        width="70"></el-table-column>
          <el-table-column class="activityOperation"  label="操作"          min-width="200">
            <template scope="scope">
              <el-button @click="look(scope.row)" type="text" size="small" v-show="getButtonConfig&&getButtonConfig.check">查看</el-button>
              <el-button type="text" size="small" @click="check(scope.row)" :disabled="getEditButtonStatus(scope.row)" v-show="getButtonConfig&&getButtonConfig.edit">编辑</el-button>
              <setting-button :id="scope.row.id" :btnControl="getSettingButtonStatus(scope.row)" style="display: inline-block" v-show="getButtonConfig&&getButtonConfig.config"></setting-button>
              <el-button @click="chgStatus(scope.row)" type="text" size="small" :disabled="getPublishButtonStatus(scope.row)" v-show="getButtonConfig&&getButtonConfig.publish">发布</el-button>
              <el-button @click="push(scope.row)" :disabled="getPushButtonStatus(scope.row)" type="text" size="small" v-show="getButtonConfig&&getButtonConfig.push">推送</el-button>
            </template>
          </el-table-column>
        </el-table>
        <change-activity-status @refreshList="refreshData" :actStatus="actStatus"></change-activity-status>
        <push-activity @refreshList="refreshData" :actPush='actPush'></push-activity>
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalSize">
          </el-pagination>
        </div>
    </el-row>
  </div>
</template>
<script>
  import PushActivity from './PushActivity.vue'
  import ChangeActivityStatus from './ChangeActivityStatus.vue'
  import SettingButton from './SettingButton.vue'
  export default {
    components: {ChangeActivityStatus, PushActivity, SettingButton},
    data () {
      return {
        titleMsg: ['活动管理', '活动列表'],
        tableData: [],
        currentPage: 1,
        pageSize: 10,
        totalSize: 100,
        submPushButton: false,
        neefRefresh: false,
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        formLabelWidth: '100px',
        actPush: {},
        actStatus: {}
      }
    },
    created () {
      this.$emit('setTitleMsg', ['活动管理', '活动列表'])
      this.getData();
      this.$store.commit('SET_ChgStatusActFormVisible', false);
      this.$store.commit('SET_PushFormVisible', false);
    },
    computed: {
      getButtonConfig () {
        return this.$store.getters.getButtonConfig('activityList')
      }
    },
    methods: {
      refreshData: function () {
        this.getData();
      },
      getEditButtonStatus (row) {
        if (row.publishStatusText === '已结束' || row.publishStatusText === '已下架' || row.statusText === '已结束' || row.publishStatusText === '已结束') {
          return true;
        } else {
          return false;
        }
      },
      getSettingButtonStatus (row) {
        if (row.type == 'REGISTRATION' || row.type == 'INTRODUCTION' || row.type == 'FINANCIAL_CUSTOMER_INVESTMENT' || row.type == 'BIRTHDAY_TYPE') {
          return true
        } else {
          return false
        }
      },
      getPublishButtonStatus (row) {
        if (row.typeText === '生日送券') {
          return true
        }
        if (row.publishStatusText === '已下架') {
          return true;
        } else {
          return false;
        }
      },
      getPushButtonStatus (row) {
        if (row.publishStatusText === '未发布' || row.publishStatusText === '已结束' || row.publishStatusText === '已下架' ||
          row.statusText === '已结束' || row.typeText === '生日送券') {
          return true;
        } else {
          return false;
        }
      },
      push (row) {
        this.$store.commit('SET_PushActId', row.id);
        this.$store.commit('SET_PushFormVisible', true);
        this.actPush = row;
      },
      chgStatus (row) {
        this.$store.commit('SET_ChgStatusActId', row.id);
        this.$store.commit('SET_ChgStatusActFormVisible', true);
        this.actStatus = row;
      },
      getData () {
        this.$http.get('/api-active/v1/api/activityCenter/activity/list?curPage=' + (this.currentPage - 1) + '&pageSize=' + this.pageSize).then((response) => {
          let data = response.body
          this.tableData = data.result
          this.totalSize = data.size
        })
      },
      look (row) {
        sessionStorage.setItem('actShowId', row.id)
        this.$router.push({path: '/activityLook'})
      },
      check (row) {
        let status;
        if (row.statusText === '进行中') {
          status = 1;
        } else {
          status = 2;
        }
        console.log(row.type);
        this.$router.push({name: 'actEdit', params: {actId: row.id, status: status, type: row.type}});
        sessionStorage.setItem('activityId', row.id)
        sessionStorage.setItem('actStatus', status)
      },
      handleSizeChange (val) {
        this.pageSize = val
        console.log('pageSize = ' + this.pageSize)
        this.getData()
      },
      handleCurrentChange (val) {
        this.currentPage = val
        console.log('curpage = ' + this.currentPage)
        this.getData()
      }
    }
  }
</script>
<style lang="less" scoped="scoped" >
  @greenStyle:#63c5ce;
  @orangeStyle:#f7931e;
  .activityListTable{
      .contentView{
      min-height:100%;
      background: #ffffff
    }
    .el-table-column {
      text-align: center;
    }
    .titleBox {
      height: 56px;
      border-bottom: 1px solid #ccc;
      text-align: left;
    }
    .title {
      display: block;
      height: 100%;
      text-align: left;
      line-height: 56px;
    }
    .pagMod {
      margin-top: 20px;
    }
    .title:nth-child(1) :after {
      content: "·";
    }
    .chgStatusForm {
      width: 1000px;
      margin: 0 auto;
    }
    .myCheckBox, .spanRight{
      text-align:left
    }
    .spanLelft{
      font-weight:bold;
      text-align:right;
      margin-right:20px;
      padding-left:20px;
    }
    .spanCheckBoxLelft{
      font-weight:bold;
      text-align:left;
      margin-right:20px;
      padding-left:80px;
    }
    .el-table_1_column_11 span {
      margin-left:10px
    }
    .block{
      float: right;
      margin-top:1.875rem;
    }
    .el-table{
      .el-table__body-wrapper{
        overflow-y: hidden;
      }
      th {
        background: #ebfcfc;
        .cell {
          font-size: 0.875rem;
          min-height:2.5rem;
          line-height:2.5rem;
          padding-left: 3px;
          padding-right: 3px;
          background: #ebfcfc;
          text-align: left;
          &:first-child{
            margin-left:20px;
          }
        }
      }
      .el-table__body{
        color:#666666;
        overflow-y: auto;
        .cell{
          font-size: 0.875rem;
          padding-left:3px;
          padding-right:3px;
          text-align: left;
          &:first-child{
            margin-left:20px;
          }
        }
      }
      .el-button--text{
        color:@greenStyle;
        margin:0 5px;
        &:first-child{
          margin: 0;
        }
      }
      .el-button--small{
        font-size: 0.875rem;
      }
      .is-disabled{
        color:#bfcbd9;
      }
    }
    .createButton{
      width:100px;
      height:2.25rem;
      background: @orangeStyle;
      color:white;
      font-size:0.9em;
      border:0;
      &:hover{
        color:white;
        border:0;
      }
    }
    .toCreate,el-row{
      height:5.375rem;
      line-height:5.375rem;
    }
    .el-button--text{
      color:@greenStyle;
      margin:0 5px;
    }
    .is-disabled{
      color:#bfcbd9;
    }
    .el-dialog{
      .el-dialog__footer{
        .el-button{
          color:#1f2d3d;
          &:hover{
            border-color:@greenStyle;
            color:@greenStyle;
          }
        }
        .el-button--primary{
          color:#fff;
          border-color:@greenStyle;
          background: @greenStyle;
          &:hover{
            color:#fff;
          }
        }
      }
    }
    .el-table_1_column_11 .el-button {
      margin-left:10px;
      color:@greenStyle;
    }
     .el-table_1_column_11 .is-disabled{
       color: #bfcbd9;
     }
    .el-pager li.active{
      border-color: @greenStyle;
      background: @greenStyle;
    }
  }
</style>
